"use client";

import { Button } from "@/components/ui/button";
import { 
  ArrowDown, 
  ArrowLeft, 
  ArrowRight, 
  ArrowUp, 
  Pause, 
  Play, 
  RefreshCw, 
  SkipForward 
} from "lucide-react";
import { motion } from "framer-motion";

interface TetrisControlsProps {
  onMoveLeft: () => void;
  onMoveRight: () => void;
  onRotate: () => void;
  onSoftDrop: () => void;
  onReleaseSoftDrop: () => void;
  onHardDrop: () => void;
  onPause: () => void;
  onReset: () => void;
  gameOver: boolean;
  isPaused: boolean;
  isMobile: boolean;
}

const TetrisControls = ({
  onMoveLeft,
  onMoveRight,
  onRotate,
  onSoftDrop,
  onReleaseSoftDrop,
  onHardDrop,
  onPause,
  onReset,
  gameOver,
  isPaused,
  isMobile,
}: TetrisControlsProps) => {
  return (
    <motion.div 
      className="tetris-controls flex flex-col gap-4"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.3 }}
      whileHover={{ scale: 1.01 }}
    >
      {/* 游戏控制按钮 */}
      <div className="flex justify-center gap-3">
        <Button
          variant="outline"
          size="icon"
          onClick={onPause}
          disabled={gameOver}
          className="border-primary/30 hover:bg-primary/20 bg-gradient-to-br from-blue-900/40 to-indigo-900/40 shadow-md shadow-blue-500/10"
        >
          {isPaused ? <Play size={20} className="text-green-400" /> : <Pause size={20} className="text-yellow-400" />}
        </Button>
        <Button
          variant="outline"
          size="icon"
          onClick={onReset}
          className="border-primary/30 hover:bg-primary/20 bg-gradient-to-br from-purple-900/40 to-pink-900/40 shadow-md shadow-purple-500/10"
        >
          <RefreshCw size={20} className="text-pink-400" />
        </Button>
      </div>

      {/* 移动设备控制 */}
      {isMobile && (
        <div className="grid grid-cols-3 gap-2 mt-2">
          <div className="col-span-3 flex justify-center">
            <Button
              variant="outline"
              size="icon"
              className="w-16 h-16 rounded-full border-primary/30 hover:bg-primary/20 bg-gradient-to-br from-purple-900/40 to-indigo-900/40 shadow-lg shadow-purple-500/20"
              onClick={onRotate}
            >
              <ArrowUp size={24} className="text-purple-400" />
            </Button>
          </div>
          
          <div className="flex justify-end">
            <Button
              variant="outline"
              size="icon"
              className="w-16 h-16 rounded-full border-primary/30 hover:bg-primary/20 bg-gradient-to-br from-blue-900/40 to-indigo-900/40 shadow-lg shadow-blue-500/20"
              onTouchStart={onMoveLeft}
              onClick={onMoveLeft}
            >
              <ArrowLeft size={24} className="text-blue-400" />
            </Button>
          </div>
          
          <div className="flex justify-center">
            <Button
              variant="outline"
              size="icon"
              className="w-16 h-16 rounded-full border-primary/30 hover:bg-primary/20 bg-gradient-to-br from-green-900/40 to-teal-900/40 shadow-lg shadow-green-500/20"
              onTouchStart={onSoftDrop}
              onTouchEnd={onReleaseSoftDrop}
              onClick={onSoftDrop}
            >
              <ArrowDown size={24} className="text-green-400" />
            </Button>
          </div>
          
          <div className="flex justify-start">
            <Button
              variant="outline"
              size="icon"
              className="w-16 h-16 rounded-full border-primary/30 hover:bg-primary/20 bg-gradient-to-br from-cyan-900/40 to-blue-900/40 shadow-lg shadow-cyan-500/20"
              onTouchStart={onMoveRight}
              onClick={onMoveRight}
            >
              <ArrowRight size={24} className="text-cyan-400" />
            </Button>
          </div>
          
          <div className="col-span-3 flex justify-center mt-2">
            <Button
              variant="outline"
              className="border-primary/30 hover:bg-primary/20 bg-gradient-to-r from-pink-900/40 to-red-900/40 shadow-md shadow-pink-500/20"
              onClick={onHardDrop}
            >
              <SkipForward size={20} className="mr-2 text-pink-400" />
              <span className="bg-gradient-to-r from-pink-400 to-red-400 bg-clip-text text-transparent font-medium">快速落下</span>
            </Button>
          </div>
        </div>
      )}

      {/* 键盘控制说明 */}
      <div className="bg-gradient-to-br from-indigo-900/40 to-purple-900/40 p-4 rounded-lg shadow-inner text-sm border border-primary/10">
        <h3 className="font-medium mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">键盘控制：</h3>
        <ul className="space-y-1 text-white/80">
          <li className="flex items-center"><span className="inline-block bg-blue-900/50 px-2 py-1 rounded mr-2 text-blue-400">←→</span>左右移动</li>
          <li className="flex items-center"><span className="inline-block bg-purple-900/50 px-2 py-1 rounded mr-2 text-purple-400">↑</span>旋转</li>
          <li className="flex items-center"><span className="inline-block bg-green-900/50 px-2 py-1 rounded mr-2 text-green-400">↓</span>加速下落</li>
          <li className="flex items-center"><span className="inline-block bg-pink-900/50 px-2 py-1 rounded mr-2 text-pink-400">空格</span>直接落到底部</li>
          <li className="flex items-center"><span className="inline-block bg-yellow-900/50 px-2 py-1 rounded mr-2 text-yellow-400">P</span>暂停/继续</li>
          <li className="flex items-center"><span className="inline-block bg-red-900/50 px-2 py-1 rounded mr-2 text-red-400">R</span>重新开始</li>
        </ul>
      </div>
    </motion.div>
  );
};

export default TetrisControls;